import React, { Suspense } from "react";
import { BrowserRouter, useRoutes } from "react-router-dom";
const Home = React.lazy(() => import("../views/home"));
const List = React.lazy(() => import("../views/list"));
const MainLayout = React.lazy(() => import("../views/mainLayout"));
const Table = React.lazy(() => import("../views/table"));
const Set = React.lazy(() => import("../views/set"));
const Upload = React.lazy(() => import("../views/upload"));

const ROUTER_LIST = [
  {
    path: "/",
    element: <MainLayout></MainLayout>,
    children: [
      {
        path: "/",
        element: <Home></Home>,
      },
      {
        path: "/list",
        element: <List></List>,
      },
      {
        path: "/upload",
        element: <Upload></Upload>,
      },
      {
        path: "/table",
        element: <Table></Table>,
      },
      {
        path: "/set",
        element: <Set></Set>,
      },
    ],
  },
];

const Router = () => {
  const RouterView = () => useRoutes(ROUTER_LIST);
  return (
    <BrowserRouter>
      <Suspense fallback={<div>路由加载中....</div>}>
        <RouterView></RouterView>
      </Suspense>
    </BrowserRouter>
  );
};

export default Router;
